<template>
	<el-container>
		<el-header>
			<div class="header">
				<ul class="header-left">
					<li><img src="../assets/logo.png" alt="" width="130px" height="31px"></li>
					<li>|</li>
					<li>
						<p @click="$router.push('/404/404')">艺恩专注数据服务12年</p>
					</li>
					<li><input @keyup.enter="pass" v-model="text" type="text" placeholder="请输入影片、影院等搜索"></li>
					<li><img @click="pass" src="../assets/se.png" alt="" width="20px"></li>
				</ul>
				<ul class="header-right">
					<li>
						<img src="../assets/logo1.png">
						<el-select v-model="value" multiple filterable allow-create default-first-option
							placeholder="	艺恩星数" style="width: 140px; color: #7030a0;">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</li>
					<li>
						<el-button type="text" class="btn" @click="open">登录/注册</el-button>
					</li>
				</ul>
			</div>
		</el-header>
		<el-container class="nav">
			<el-aside width="200px">
				<div>
					<el-menu router default-active="/sjdp/hydp" class="el-menu-vertical-demo" @open="handleOpen"
						@close="handleClose" :collapse="isCollapse">


						<el-submenu index="/sjdp">
							<template slot="title">
								<i class="el-icon-finished"></i>
								<span>数据大盘</span>
							</template>
							<el-menu-item index="/sjdp/hydp">
								<span slot="title">行业大盘</span>
							</el-menu-item>
							<el-menu-item index="/sjdp/pfdp">
								<span slot="title">票房大盘</span>
							</el-menu-item>
							<el-menu-item index="/sjdp/ppdp">
								<span slot="title">排片大盘</span>
							</el-menu-item>
						</el-submenu>



						<el-submenu index="/pffx">
							<template slot="title">
								<i class="el-icon-data-line"></i>
								<span>票房分析</span>
							</template>
							<el-menu-item index="/pffx/pfb">
								<span slot="title">票房榜</span>
							</el-menu-item>
							<el-menu-item index="/pffx/yppf">
								<span slot="title">影片票房</span>
							</el-menu-item>
							<el-menu-item index="/pffx/yypf">
								<span slot="title">影院票房</span>
							</el-menu-item>
							<el-menu-item index="/pffx/sspf">
								<span slot="title">省市票房</span>
							</el-menu-item>
							<el-menu-item index="/pffx/hwpf">
								<span slot="title">海外票房</span>
							</el-menu-item>
						</el-submenu>
						<el-submenu index="/ppfx">
							<template slot="title">
								<i class="el-icon-data-board"></i>
								<span>排片分析</span>
							</template>
							<el-menu-item index="/ppfx/yppp">
								<span slot="title">影片排片</span>
							</el-menu-item>
							<el-menu-item index="/ppfx/yypp">
								<span slot="title">影院排片</span>
							</el-menu-item>
							<el-menu-item index="/ppfx/sspp">
								<span slot="title">省市排片</span>
							</el-menu-item>
						</el-submenu>
						<el-submenu index="/xfyq">
							<template slot="title">
								<i class="el-icon-data-analysis"></i>
								<span>宣发舆情</span>
							</template>
							<el-menu-item index="/xfyq/rszs">
								<span slot="title">认识指数</span>
							</el-menu-item>
							<el-menu-item index="/xfyq/gpzs">
								<span slot="title">购票指数</span>
							</el-menu-item>
							<el-menu-item index="/xfyq/kbzs">
								<span slot="title">口碑指数</span>
							</el-menu-item>
						</el-submenu>
						<el-submenu index="/qb">
							<template slot="title">
								<i class="el-icon-notebook-2"></i>
								<span>情报</span>
							</template>
							<el-menu-item index="/qb/tzqb">
								<span slot="title">投资情报</span>
							</el-menu-item>
							<el-menu-item index="/qb/fhqb">
								<span slot="title">发行情报</span>
							</el-menu-item>
							<el-menu-item index="/qb/yyqb">
								<span slot="title">影院情报</span>
							</el-menu-item>
							<el-menu-item index="/qb/zrgg">
								<span slot="title">植入广告</span>
							</el-menu-item>
							<el-menu-item index="/qb/hyfx">
								<span slot="title">行业分析</span>
							</el-menu-item>
						</el-submenu>
						<el-menu-item index="/grzx/grzx">
							<i class="el-icon-user-solid"></i>
							<span slot="title">个人中心</span>
						</el-menu-item>
						<el-menu-item index="/gmxf/gmxf">
							<i class="el-icon-shopping-cart-2"></i>
							<span slot="title">购买续费</span>
						</el-menu-item>
						<div class="toggle" @click="isCollapse=!isCollapse">
							<span v-if="isCollapse"><i class="el-icon-s-unfold"></i> </span>
							<span v-else><i class="el-icon-s-fold"></i>收起侧边栏</span>
						</div>
					</el-menu>
				</div>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>

</template>

<script>
	export default {
		data() {
			return {
				options: [{
					value: '	代言人版',
					label: '	代言人版'
				}, {
					value: '	小红书版',
					label: '	小红书版'
				}, {
					value: '	B站版',
					label: '	B站版'
				}],
				value: [],
				isCollapse: false,
				text: '',
			}
		},
		methods: {
			pass() {
				console.log(this.text);
				this.$router.replace('/search/' + this.text);
				this.text = ''
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			open() {
				this.$alert(
					'<div style="text-align: center;"><h3>密码登录<br/><br/></h3>手机：<input type="text" placeholder="请输入手机号"><br/><br/>密码：<input type="text" placeholder="6-15位数字与字母"><small style="color: red;"><br/><br/>忘记密码？</small></div>', {
						dangerouslyUseHTMLString: true,
						showCancelButton: true,
						confirmButtonText: '确定登录',
						cancelButtonText: '取消',
						beforeClose: (action, instance, done) => {
							if (action === 'confirm') {
								instance.confirmButtonLoading = true;
								instance.confirmButtonText = '执行中...';
								setTimeout(() => {
									done();
									setTimeout(() => {
										instance.confirmButtonLoading = false;
									}, 300);
								}, 2000);
							} else {
								done();
							}
						}
					}).then(action => {
					this.$message({
						type: 'info',
						message: '登陆成功 ' + action
					});
				});
			}
		}
	}
</script>
<style>
	.el-menu-item.is-active {
		color: white !important;
		background-color: #7030a0 !important;
		border-radius: 2px !important;
	}
</style>
<style scoped>
	.sjdp {
		width: 100vw;
		height: 100vh;
	}

	ul {
		list-style: none;
	}

	.tac {
		width: 300px;
	}

	.el-aside {
		overflow-x: hidden;
	}

	.header {
		position: relative;
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 60px;
		line-height: 60px;
		margin-bottom: 10px;
		min-width: 1200px;
	}

	.header .header-left {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
	}

	.header .header-left li:nth-of-type(1) {
		width: 130px;
		height: 31px;
		margin-left: -30px;
		margin-bottom: 10px;
	}

	.header .header-left li:nth-of-type(2) {
		margin: 0 7px;
	}

	.header .header-left li:nth-of-type(3) p {
		width: 130px;
		height: 20px;
		cursor: pointer;
		color: #87838e;
		line-height: 20px;
		font-size: 12px;
		margin-right: 15px;
		font-weight: 500;
	}

	.header .header-left li:nth-of-type(5) {
		position: absolute;
		margin-top: 12px;
		left: 520px;
	}

	.header .header-left li input {
		width: 240px;
		height: 30px;
		border: 1px solid #f0f0f0;
	}

	.header .header-left li input:focus {
		outline: none;
		border: 1px solid #aaa;
	}

	.header .header-right {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
	}

	.header .header-right li:nth-of-type(2) {
		margin: 5px 20px 0PX 20px;
	}

	.header .header-right li button {
		background-color: #7030a0;
		border: none;
		width: 80px;
		height: 30px;
		line-height: 10px;
	}

	.header .header-right li img {
		position: absolute;
		right: 210px;
		top: 1px;
		width: 30px;
		height: 30px;
		z-index: 999;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}

	.nav {
		position: relative;
		height: 100vh;
	}

	.toggle {
		position: fixed;

		bottom: 15px;
		text-align: center;
	}

	.toggle span {
		margin-left: 25px;
	}
</style>
